﻿@model DisplayResultsViewModel

@{
	ViewBag.Title = "Display Results";
}

@using (Html.BeginForm())
{
	@Html.ValidationSummary()

<div class="top clearfix">
	<div class="col">
		<figure>
			<canvas id="plot-canvas" height="483" width="708"></canvas>
		</figure>
	</div>

	<aside class="col">
		<fieldset>
			<legend>Weights</legend>
			<table style="width: 100%;">
				<thead>
					<tr>
						<th>Attribute</th>
						<th>Economic (x)</th>
						<th>Social (y)</th>
					</tr>
				</thead>
				<tbody>
				@for (int i = 0; i < Model.Weights.Length; i++)
				{
					<tr>
						<td>
							@Html.HiddenFor(m => m.Weights[i].Name)
							@Model.Weights[i].Name
						</td>
						<td>@Html.TextBoxFor(m => m.Weights[i].X, new { @class = "number" })</td>
						<td>@Html.TextBoxFor(m => m.Weights[i].Y, new { @class = "number" })</td>
					</tr>
				}
				</tbody>
			</table>
		</fieldset>
	</aside>
</div>

<div class="bottom clearfix">
	<div class="col clearfix">
		<input type="submit" id="submit" value="Run Simulation" />

	@if (Model.Results != null)
	{
		<fieldset>
			<legend>Results</legend>
			<table id="ResultsTable">
				<thead>
					<tr>
						<th>Party</th>
						<th>Median Distance</th>
						<th>Voters</th>
					</tr>
				</thead>
				<tbody>
				@foreach (var candidate in Model.Results.CandidateResults.SortedAscendingByDistanceFromMedian())
				{
					<tr class="candidate @candidate.Candidate.Name">
						<td>@candidate.Candidate.Name</td>
						<td>@candidate.DistanceFromMedian</td>
						<td class="right">@candidate.NumberOfVotes.ToString("N0")</td>
					</tr>
				}
				</tbody>
			</table>
		</fieldset>
	 
		<fieldset>
			<legend>Normalization Scale</legend>
			@Model.Results.NormalizationScale
		</fieldset>
	}
	else
	{
		<text>&nbsp;</text>
	}
	</div>

	<aside class="col">
		<fieldset>
			<legend>Parties</legend>
			<table id="CandidatesTable">
				<thead>
					<tr>
						<th>Name</th>
						<th>Economic (x)</th>
						<th>Social (y)</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
				@for (int i = 0; i < Model.Candidates.Length; i++)
				{
					<tr class="candidate @Model.Candidates[i].Name">
						<td>
							@Html.HiddenFor(m => m.Candidates[i].Name)
							@Model.Candidates[i].Name
						</td>
						<td>@Html.TextBoxFor(m => m.Candidates[i].X, new { @class = "number x", onchange = "PlotCandidates()" })</td>
						<td>@Html.TextBoxFor(m => m.Candidates[i].Y, new { @class = "number y", onchange = "PlotCandidates()" })</td>
						<td>@if (i > 1) {<a href="#" onclick="RemoveCandidate('.@Model.Candidates[i].Name'); return false;">Remove</a>}</td>
					</tr>
				}
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3"></td>
						<td><a href="#" id="AddCandidate" onclick="AddCandidate(); return false;">Add</a></td>
					</tr>
				</tfoot>
			</table>
		</fieldset>
	</aside>
</div>
}

@section header
{
	<a href="/Main/LoadFile/" class="float-right">&laquo; Choose New Data File</a>
}

@section scripts
{
	@{
	string plotUrl;

	if (Model.Results == null)
	{
		plotUrl = "/images/plot-empty.png";
	}
	else
	{
		plotUrl = "/Main/DisplayPlot/";
	}
	}
	@Scripts.Render("~/scripts/politicalclassifier.extensions.js")
<script type="text/html" id="candidate-template">
	<tr class="candidate C{1}">
		<td>
			<input id="Candidates_{0}__Name" name="Candidates[{0}].Name" type="hidden" value="C{1}" />
			C{1}
		</td>
		<td><input class="number x" data-val="true" data-val-number="The field X must be a number." data-val-range="The field X must be between -1 and 1." data-val-range-max="1" data-val-range-min="-1" data-val-required="The X field is required." id="Candidates_{0}__X" name="Candidates[{0}].X" onchange="PlotCandidates()" type="text" value="{2}" /></td>
		<td><input class="number y" data-val="true" data-val-number="The field Y must be a number." data-val-range="The field Y must be between -1 and 1." data-val-range-max="1" data-val-range-min="-1" data-val-required="The Y field is required." id="Candidates_{0}__Y" name="Candidates[{0}].Y" onchange="PlotCandidates()" type="text" value="{3}" /></td>
		<td><a href="#" onclick="RemoveCandidate('.C{1}'); return false;">Remove</a></td>
	</tr>
</script>
<script type="text/javascript">
	var colors = ["red", "green", "blue", "orange", "purple", "yellow", "cyan", "magenta", "brown", "pink"];
	var plot;

	function PlotCandidates() {
		var canvas = document.getElementById("plot-canvas");
		var context = canvas.getContext("2d");
		context.restore();
		context.save();
		context.drawImage(plot, 0, 0);
		context.transform(320, 0, 0, 213, 59, 14);
		context.transform(1, 0, 0, -1, 0.98, 1.03);
		$("#CandidatesTable .candidate").each(function (index) {
			var x = $(this).find("input.x").first().val(), y = $(this).find("input.y").first().val();
			context.fillStyle = colors[index];
			context.fillRect(x, y, 0.04, 0.06);
		});
	}

	function AddCandidate() {
		var candidateCount = $("#CandidatesTable .candidate").length;

		if (candidateCount > 9) {
			alert("You cannot have more than 10 candidates.");
			return false;
		}

		var template = $("#candidate-template").html();
		$("#CandidatesTable .candidate").first().parent().append(template.format(candidateCount, candidateCount + 1, "0", "0"));

		if (candidateCount > 8)
			$("#AddCandidate").hide();

		PlotCandidates();
	}

	function RemoveCandidate(candidate) {
		$(candidate).remove();
		var candidates = $("#CandidatesTable .candidate");

		if (candidates.length > 2) {
			var template = $("#candidate-template").html();
			var parent = candidates.first().parent();
			candidates.each(function (index) {
				if (index > 1) {
					var x = $(this).find("input.x").first().val(), y = $(this).find("input.y").first().val();
					parent.append(template.format(index, index + 1, x, y));
					$(this).remove();
				}
			});
		}

		if (candidates.length > 8)
			$("#AddCandidate").show();

		PlotCandidates();
	}

	$(document).ready(function () {
		plot = new Image();
		plot.onload = function () {
			PlotCandidates();
		};
		plot.src = "@plotUrl";
	});
</script>
}